<template>
  <div class="hv-designer-header-container">
    <div class="hv-designer-header-title">{{ dashboardTitle }}</div>
    <div class="hv-designer-header-tools">
      <div>
        主题：
        <a-select
          :value="theme"
          show-search
          placeholder="请选择主题..."
          size="small"
          class="hv-designer-header-theme"
          dropdownClassName="hv-dark-select-dropdown"
          @change="themeChange"
        >
          <template v-if="dashboardThemeList && dashboardThemeList.length > 0">
            <a-select-option
              :value="option.themeId"
              v-for="(option, index) in dashboardThemeList"
              :key="option.themeId + index"
            >
              {{ option.themeName }}
            </a-select-option>
          </template>
        </a-select>
      </div>
      <hv-custom-button size="small" btnClass="hv-designer-btn" @click="save">
        <hv-dynamic-icon iconName="SaveOutlined" />
        保存
      </hv-custom-button>
      <hv-custom-button size="small" btnClass="hv-designer-btn" @click="saveAndBack">
        <hv-dynamic-icon iconName="SaveOutlined" />
        保存并返回
      </hv-custom-button>
      <hv-custom-button size="small" btnClass="hv-designer-btn" @click="preview">
        <hv-dynamic-icon iconName="EyeOutlined" />
        预览
      </hv-custom-button>
      <hv-custom-button size="small" btnClass="hv-designer-btn" @click="back">
        <hv-dynamic-icon iconName="RollbackOutlined" />
        返回
      </hv-custom-button>

      <div class="hv-designer-log-dropdown" @click.stop>
        <div
          class="hv-designer-log-dropdown-bg"
          v-if="dashboardLogVisible"
          @click="dashboardLogVisible = false"
        ></div>
        <hv-custom-button
          size="small"
          btnClass="hv-designer-btn"
          :disabled="dashboardId && dashboardId.length > 0 ? false : true"
          @click="queryDashboardLogList"
        >
          <hv-dynamic-icon iconName="history-outlined" />
          历史
        </hv-custom-button>

        <div class="hv-designer-log-list" v-hv-scrollbar v-if="dashboardLogVisible">
          <a-spin :spinning="dashboardLogSpinning" :delay="500">
            <div
              class="hv-designer-log-list-item"
              v-for="(item, index) in dashboardLogList"
              :key="index"
              @click="reductionLog(item)"
            >
              <hv-dynamic-icon iconName="history-outlined" />
              {{ " " + item.createDate }}
            </div>
          </a-spin>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType, ref, watch } from 'vue';
import { type LocationQueryValue, useRoute } from 'vue-router';
import { dashboardTitle } from '@/visual/configs/dashboard-conifg';
import type DashboardLogType from '@/visual/commons/types/dashboard-log-type';
import HttpResultUtil from '@/visual/commons/utils/http-result-util';
import DashboardLogApi from '@/visual/apis/dashboard-log-api';

export default defineComponent({
  name: 'DesignerHeaderPanel',
  props: {
    dashboardTheme: {
      type: String,
      defult: '',
    },
    dashboardThemeList: {
      type: Array as PropType<any[]>,
      defult: () => [],
    },
  },
  emits: [
    'save',
    'back',
    'preview',
    'saveAndBack',
    'update:dashboardTheme',
    'dashboardThemeChange',
    'reductionLog'
  ],
  setup(props, { emit }) {
    const route = useRoute();
    const dashboardId = ref<LocationQueryValue | LocationQueryValue[]>(null);
    const dashboardLogList = ref<DashboardLogType[]>([]);
    const dashboardLogVisible = ref<boolean>(false);
    const dashboardLogSpinning = ref<boolean>(false);

    const theme = ref<string>('');

    const save = () => {
      emit('save');
    };

    const back = () => {
      emit('back');
    };

    const preview = () => {
      emit('preview');
    };

    const saveAndBack = () => {
      emit('saveAndBack');
    };

    const themeChange = (val: string) => {
      emit('update:dashboardTheme', val);
      if (props.dashboardThemeList) {
        const themeObj = props.dashboardThemeList.find((item) => item.themeId === val);
        emit('dashboardThemeChange', themeObj.themeConfig);
      } else {
        emit('dashboardThemeChange', null);
      }
    };

    const queryDashboardLogList = () => {
      dashboardLogVisible.value=true;
      dashboardLogSpinning.value=true;
      DashboardLogApi.queryDashboardLogListByParameter({
        dashboardId: dashboardId.value,
      }).then((res) => {
        dashboardLogSpinning.value=false;
        if (HttpResultUtil.isSuccess(res)) {
          if(res.data.responseData && res.data.responseData.length){
            dashboardLogList.value  = res.data.responseData;
          }else{
            dashboardLogList.value  = [];
          }
        } else {
          HttpResultUtil.failureTipMsg(res);
        }
      },()=>{
        dashboardLogSpinning.value=false;
      });
    };

    const reductionLog = (item:DashboardLogType)=>{
     emit('reductionLog',item);
    }


    watch(
      () => props.dashboardTheme,
      (val) => {
        if (val) {
          theme.value = val;
        }
      },
      { deep: false, immediate: true }
    );

    watch(
      () => route.query,
      (val) => {
        if (val) {
          dashboardId.value = route.query.id;
        }
      },
      { deep: false, immediate: true }
    );



    return {
      theme,
      dashboardId,
      save,
      back,
      preview,
      saveAndBack,
      themeChange,
      dashboardTitle,
      queryDashboardLogList,
      dashboardLogList,
      dashboardLogVisible,
      dashboardLogSpinning,
      reductionLog
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerHeaderPanel.less";
</style>
